//722.650
import React, { Component } from 'react';
import { connect } from 'react-redux'
import { post, get } from '../../utils/http.js'

import { loadDataAsync } from '../../login/actionCreater'
import { RegistSty } from "./StyledLogin";

import phone from '../../assets/images/login/p_03.png'
import mm from '../../assets/images/login/p_07.png'
import tan from '../../assets/images/login/tanhao_03.png'

import { Toast,WingBlank, Button } from 'antd-mobile';



function showToast() {
  Toast.info('请完整填写注册信息!!!', 1);
}

function showToastNoMask() {
  Toast.info('请输入验证码！', 2, null, false);
}

function successToast() {
  Toast.success('注册成功 请登录!', 1);
}

function failToast(text) {
  Toast.fail(`${text} !!!`, 1);
}

function offline() {
  Toast.offline('验证码发送成功', 1);
}

// function loadingToast() {
//   Toast.loading('Loading...', 1, () => {
//     console.log('Load complete !!!');
//   });
// }

// const customIcon = () => (
//   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="am-icon am-icon-md">
//     <path fillRule="evenodd" d="M59.177 29.5s-1.25 0-1.25 2.5c0 14.47-11.786 26.244-26.253 26.244C17.206 58.244 5.417 46.47 5.417 32c0-13.837 11.414-25.29 25.005-26.26v6.252c0 .622-.318 1.635.198 1.985a1.88 1.88 0 0 0 1.75.19l21.37-8.545c.837-.334 1.687-1.133 1.687-2.384C55.425 1.99 53.944 2 53.044 2h-21.37C15.134 2 1.667 15.46 1.667 32c0 16.543 13.467 30 30.007 30 16.538 0 29.918-13.458 29.993-30 .01-2.5-1.24-2.5-1.24-2.5h-1.25" />
//   </svg>
// );
@connect(
  (state) => {
    // console.log(state)
    return {
      list: state.login.list
    }
  },
  (dispatch) => ({
    loadData() {
      dispatch(loadDataAsync())
    }
  })
)

class Regist extends Component {
  constructor(props) {
    super(props);
    this.state = {
      password: '',
      regpassword: '',
      email: '',
      verify: '',
      waring: 'none',
      parl: '',
      paswaring: 'none',
      repass: 'none',
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange = (e) => {
    switch (e.target.name) {
      case 'password': this.setState({ ...this.state, password: e.target.value });
        break;
      case 'verify': this.setState({ ...this.state, verify: e.target.value });
        break;
      case 'regpassword': this.setState({ ...this.state, regpassword: e.target.value });
        break;
      case 'email': this.setState({ ...this.state, email: e.target.value });
    }
    // e.target.type === 'password'
    //   ? this.setState({ ...this.state, password: e.target.value })
    //   : this.setState({ ...this.state, email: e.target.value })
  }
  componentDidMount() {
    // this.props.loadData()
    // Toast.loading('Loading...', 30, () => {
    //   console.log('Load complete !!!');
    // });

    // setTimeout(() => {
    //   Toast.hide();
    // }, 3000);
  }
  passwordverify = (e) => {
    if (e.target.name === 'password') {
      let regs = /^(?=.*[a-zA-Z])(?=.*[0-9])[A-Za-z0-9]{8,18}$/
      if (!e.target.value.match(regs)) {
        this.setState({ ...this.state, paswaring: 'block' })
      }
    } else {
      this.state.password === this.state.regpassword
        ? this.setState({ ...this.state, repass: 'none' })
        : this.setState({ ...this.state, repass: 'block' })
    }

  }
  handleVerify = (email) => {
    return (async () => {
      // let data = {
      //   "zhanghao":email
      // }
      console.log(email)
      let result = await get({
        url:`/api/user/getCode?zhanghao=${email}`
      },
      // {
      //   data
      // }
      )
      if(result.data.code===0){
        offline()
      }else{
        // showToast3();/
        console.log(result.data);
      }
    })()

  }
  handleOnblur = (e) => {
    let reg = /^[a-z1-9](?:\w|\-)+@[a-z\d]+\.[a-z]{2,4}$/
    if (!reg.test(e.target.value)) {
      this.setState({ ...this.state, waring: 'block' })
    } else { this.setState({ ...this.state, waring: 'none' }) }
  }
  handleReg = () => {
    if (this.state.email === '' || this.state.password === '' ) {
      showToast()
    } else if (this.state.verify === '') {
      showToastNoMask()
    } 
    else if (this.state.regpassword === '') {
      failToast("请确认密码")
    }else {
      (async () => {
        let result = await post({
          url:'/api/user/regist'
        },
        {
          data:{
            "zhanghao":this.state.email,
            "password":this.state.password,
            "checkCode":this.state.verify,
          }
        })
        if(result.code===0){
          successToast()
        }else{
          // showToast3();/
          failToast("注册失败")
          console.log(result);

        }
      })()
      // successToast()
      // let { history } = this.props
      // history.push(`/login`)
    }
  }
  render() {
    return (
      <RegistSty>
        <div className='wrap'>
          <div className='kuang'>
            <h1>注册</h1>
            <ul>
              <li>
                <p style={{ display: `${this.state.waring}`, color: "red" }} >邮箱格式不正确，请重新输入！！</p>
                <div>
                  <input name="email" onChange={this.handleChange} onBlur={this.handleOnblur} type="text" value={this.state.email} placeholder="请在这里输入您的手机号码" />
                  <span><img src={`${phone}`} alt="" /></span>
                </div>
              </li>
              <li>
                <p style={{ display: `${this.state.paswaring}`, color: "red" }} >密码必须是8-18位，包含字母、数字！！</p>
                <div>
                  <input name="password" onBlur={this.passwordverify} onChange={this.handleChange} type="password" value={this.state.password} placeholder="请在这里输入您的密码" />
                  <span><img src={`${mm}`} alt="" /></span>
                </div>
              </li>
              <li>
                <p style={{ display: `${this.state.repass}`, color: "red" }} >两次密码的输入不一样！！</p>
                <div>
                  <input name="regpassword" onBlur={this.passwordverify} onChange={this.handleChange} type="password" value={this.state.regpassword} placeholder="请确认您的密码" />
                  <span><img src={`${tan}`} alt="" /></span>
                </div>
              </li>
              <li className='verify'>
                <p></p>
                <div>
                  <input name="verify" type="text" onChange={this.handleChange} value={this.state.verify} placeholder="请输入验证码" />
                  <span><button onClick={()=>this.handleVerify(this.state.email)}>获取验证码</button></span>
                </div>
              </li>
            </ul>
          </div>
        </div>
        <div className='ftr'>
          <div>
            <div><p></p><span>前往登录</span></div>
            <div>
              <WingBlank>
                <Button
                  style={{ color: '#fff', backgroundColor: '#308bfe', width: '1.65rem', height: '.5rem', fontSize: '0.175rem', bordeStyle: 'none', borderRadius: '0.05rem' }}
                  onClick={this.handleReg}>注&nbsp;&nbsp;&nbsp;册</Button>
              </WingBlank></div>
          </div>
        </div>
      </RegistSty>
    );
  }
}

export default Regist